<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/index.css" />
    <link rel="stylesheet" href="/base.css" />
    <link rel="stylesheet" href="/bootstrap/dist/css/bootstrap.css" />
    <script src="/socket.io/socket.io.js"></script>
    <script src="/jquery/dist/jquery.min.js"></script>
    <link rel="stylesheet" href="./iconfont.css">
    <script src="./iconfont.js"></script>
    <title>Document</title>
    <style>
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
      </style>
  </head>
  <body>
    <div class="body">
    <div class="bigbox">
      <div class="left">
        <!-- 登录 -->
        <div class="left-top">
          <div class="igs">
            <h5>&nbsp;&nbsp;<svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-pangxie"></use>
            </svg>&nbsp;个人信息</h5>
            <a href="/login" class="btn btn-info">登录</a>
            <a href="/out" class="btn btn-danger out">退出</a>
            <div class="xin"></div>
          </div>
        </div>
        <!-- 在线用户 -->
        <div class="left-center">
          <h5>&nbsp;&nbsp;<svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-boluomi"></use>
          </svg>&nbsp;在线用户:</h5>
          <div id="users"  style="height: 160px; overflow-y: auto">
           
          </div>
        </div>

        <div class="left-footer"></div>
      </div>
      <div class="rigth">
        <!-- 右侧聊天室名字 -->
        <div class="rigth-header">
          <h3><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-meishikafei
            "></use>
          </svg></span>&nbsp;&nbsp;<%=data%>聊天室</h3>
         
        </div>
        <!-- 聊天室内容 -->
        <div class="rigth-content">
          <!-- 聊天的区域 -->
          <div class="top innerbox" style="height: 300px; overflow-y: auto">
          <div id="messages">
           
          </div></div>
          <!-- 聊天的区域结束 -->
          <div id="kuang">
            
            <div class="liao-left">
              <span class="l mc"><img src="/1.jpg" width="20px" height="20px"><b><%=data%></b>:</span
              ><span class="mn">宝贝~~想你了</span>
            </div>
            <!-- 输入界面 -->
            <div class="liao-right">
              <span class="r cn">:<b>222</b><img src="/2.jpg" width="20px" height="20px"></span>
              <span class="r oc">讨厌~死鬼!</span
              >

            </div>
          </div>
        </div>
          <div class="rigth-send">
            <div>
              <textarea name="" id="area" style="resize: none"></textarea>
            </div>
            <div>
             <span class="ls">历史记录</span>
              <button class="send">发送</button>
             
            </div>
          </div>
        </div>


   </div>      
 <!-- 历史记录 -->
 <div class="lsjl" style="display:none;">
  <h6><svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-tongluoshao"></use>
  </svg>历史记录:<button class="close">x</button></h6>
<div class="top" style="height:466px; overflow-y: auto">

</div>
  <ul>
      <!-- <li><span>用户名:</span>erdfgfddewrt</li> -->
  </ul>
</div>



</div>   
   
  </body>
  <script>




    let socket = io.connect("/");
    let name = $(".mc b").html();

    
    if(!$(".mc b").html()==""){
    $(".send").click(function () {
      //获取表单中的信息
      let v = $("textarea").val();
      //console.log(v);
      //把自己的对话框放到 class="top"的元素中
      //1.我们要找到我们要克隆的节点
      //要复制(克隆)的节点.clone()
      let me = $("#kuang .liao-left").clone();
      //修改 节点中的名字和发送的内容
      me.find(".mc b").html(name);
      me.find(".mn").html(v);

      if(v == ""){

      }else{
      $(".top").append(me);
      scrollTobottom();
      socket.emit("h57071", { name: name, msg: v });
      $("textarea").val("");
    
}

     
    });

    //点击回车发送信息
    $(window).keydown((e) => {
      if (e.keyCode == 13) {
        //让前边的元素执行一次参数中的事件
        $(".send").trigger("click");
        return false;
      }
    });

    $(".out").click(function(){
      socket.emit("haveout", { outname: name, });
    })    
    socket.on("haveout", (res) => {
      console.log(res);
      addLine( res.outname+ " 退出了群聊")

    });


//发送昵称给后端，并更改网页title
socket.emit("join", name)
document.title = name + "的群聊" //new addition 

    //发送昵称给后端
    function addLine(msg) {
        $('#messages').append($('<li>').text(msg));
       
          }     
//收到服务器发来的join事件时
socket.on("join", function (user) {
  addLine(user + " 加入了群聊")
})


// 用户在线
 function addLines(msg) {
        $('#users').append($('<li>').text(msg));
          }     
//收到服务器发来的join事件时
socket.on("join", function (user) {
  addLines(user + " 用户在线")
}) 
   
//滚轮在最后
function scrollTobottom(){
$(".top").scrollTop($(".top")[0].scrollHeight)
}
  }
    

    // 接收服务端广播出来的信息
    socket.on("h57071", (res) => {
      //克隆right 节点
      let o = $("#kuang .liao-right").clone();
      o.find(".oc").html(res.msg);
      o.find(".cn b").html(res.name);
      $(".top").append(o);
      console.log(res);
      scrollTobottom();
    });

// 历史记录
// 接收
socket.on("111", (res) => {
 
    });


    let a = true;
 $(".ls").click(function(){
  $(".lsjl").show();
 
 }) 



 $(".close").click(function(){
  $(".lsjl").hide();
 }) 
   




    
</script>
</html>
